<template>
<div>
  <div>
    <article class="c-v-pic-wrap" style="height: 357px;">
      <section class="p-h-video-box" id="videoPlay">
        <img :src="course.cover" :alt="course.title" class="dis c-v-pic">
      </section>
    </article>
    <aside class="c-attr-wrap">
      <section class="ml20 mr15">
        <h2 class="hLh30 txtOf mt15">
          <span class="c-fff fsize24">{{course.title}}</span>
        </h2>
        <section class="c-attr-jg section-margin">
          <span class="c-fff">原价：</span>
          <b class="c-999 f-fA" style="font-size:18px;text-decoration:line-through;">￥{{course.originalPrice}}</b>&nbsp;
          <span class="c-fff">现价：</span>
          <b class="c-yellow" style="font-size:24px;">￥{{course.nowPrice}}</b>
        </section>

        <section class="c-attr-mt c-attr-undis section-margin">
          <span class="c-fff fsize14">主讲： {{course.teacherName}}&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;
        </section>

        <section  v-if="isbuy || Number(course.nowPrice) === 0" class="c-attr-mt section-margin">
          <a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
        </section>
        <section  v-else class="c-attr-mt section-margin">
          <a @click="createOrder()" href="#" title="立即购买" class="comm-btn c-btn-3">立即购买</a>
        </section>
      </section>
    </aside>
    <aside class="thr-attr-box">
      <ol class="thr-attr-ol clearfix">
        
        <li>
          <p>&nbsp;</p>
          <aside>
            <span class="c-fff f-fM">购买数</span>
            <br>
            <h6 class="c-fff f-fM mt10"><span  class="buycount">{{course.buyCount}}</span></h6>
          </aside>
        </li>
        <li>
          <p>&nbsp;</p>
          <aside>
            <span class="c-fff f-fM">课时数</span>
            <br>
            <h6 class="c-fff f-fM mt10">{{course.lessonNum}}</h6>
          </aside>
        </li>
        <li>
          <p>&nbsp;</p>
          <aside>
            <span class="c-fff f-fM">浏览数</span>
            <br>
            <h6 class="c-fff f-fM mt10">{{course.viewCount}}</h6>
          </aside>
        </li>
      </ol>
    </aside>
    <div class="clear"></div>
  </div>
  <!-- /课程封面介绍 -->
  <div class="mt20 c-infor-box">
    <article class="fl col-7">
      <section class="mr30">
        <div class="i-box">

          <article class="ml10 mr10 pt20">
            <div>
              <h6 class="c-i-content c-infor-title">
                <span>课程介绍</span>
              </h6>
              <div class="course-txt-body-wrap">
                <section class="course-txt-body">
                  <p v-html="course.description">
                  </p>
                </section>
              </div>
            </div>
            <!-- /课程介绍 -->
            <div class="mt50">
              <h6 class="c-g-content c-infor-title">
                <span>课程大纲</span>
              </h6>
              <section class="mt20">
                <div class="lh-menu-wrap">
                  <menu id="lh-menu" class="lh-menu mt10 mr10">
                    <ul>
                      <!-- 文件目录 -->
                      <li class="lh-menu-stair" v-for="chapter in chapterVos" :key="chapter.id">
                        <a href="javascript: void(0)" :title="chapter.title" class="current-1">
                          <em class="lh-menu-i-1 icon18 mr10"></em>{{chapter.title}}
                        </a>
                        <ol class="lh-menu-ol" style="display: block;">
                          <li class="lh-menu-second ml30" v-for="video in chapter.videoVos" :key="video.id">
                            <a :href="'/videos/'+video.videoSourceId" :title="video.title" target="_blank">
                              <span class="fr" v-if="video.isFree === 0">
                                <i class="free-icon vam mr10">免费</i>
                              </span>
                              <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>{{video.title}}
                            </a>
                          </li>
                        </ol>
                      </li>
                    </ul>
                  </menu>
                </div>
              </section>
            </div>
            <!-- /课程大纲 -->
          </article>
        </div>
      </section>
    </article>
    <aside class="fl col-3">
      <div class="i-box">
        <div>
          <section class="c-infor-tabTitle c-tab-title">
            <a title href="javascript:void(0)">主讲讲师</a>
          </section>
          <section class="stud-act-list">
            <ul style="height: auto;">
              <li>
                <div class="u-face">
                  <a :href="'/teacher/'+course.teacherId">
                    <img :src="course.avatar" width="50" height="50" :alt="course.teacherName">
                  </a>
                </div>
                <section class="hLh30 txtOf">
                  <a class="c-333 fsize16 fl" :href="'/teacher/'+course.teacherId">{{course.teacherName}}</a>
                </section>
                <section class="hLh20 txtOf">
                  <span class="c-999">{{course.intro}}</span>
                </section>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </aside>
    <div class="clear"></div>
  </div>
</div>
</template>
<script>
import cookieApi from 'js-cookie'
import orderApi from '@/api/order'
export default {
    props: ['course','chapterVos','isbuy'],
    data(){
        return {

        }
    },
    created(){

    },
    methods:{
     //跳转视频播放界面
     videoPlayer(){
       var userStr = cookieApi.get('userinfo')
       // 判断用户是否已经登录
       if(!userStr) {
          this.$message({
            message: '您还没有登录，请先登录!',
            type: 'warning'
          });
      }else{
         const {href} = this.$router.resolve({path: `/videos/${this.course.id}`});
         window.open(href, '_blank');
      }

       
     },
     //点击立即购买，生成相应订单
    //生成订单
     createOrder() {
       var userStr = cookieApi.get('userinfo')
      // 判断用户是否已经登录
      if(!userStr) {
        this.$message({
          message: '您还没有登录，请先登录!',
          type: 'warning'
        });
      }else{
        orderApi.createOrders(this.course.id)
        .then(response => {
          //获取返回订单号
          //生成订单之后，跳转订单显示页面
          this.$router.push({path:'/order/'+response.data.data.orderId})
        })
      }
     }
    }
}
</script>
<style scoped>
.buycount{
  color:#FC0;
  font-weight:bold;
  font-size:30px;
}
.thr-attr-box{
  height: 357px;
}
.thr-attr-ol{
  height:100%;
}
.section-margin{
  margin:40px 10px;
}
</style>